<template>
	<view>
		<view class="content">
			<view class="images">
				<view class="shou">
					<img src="../../static/images/login.png" alt="" srcset="">
					<view class="text">
						收, 无止境
					</view>
				</view>

			</view>
			<view class="main">
				<view class="text">
					手机号码
				</view>
				<input type="text" placeholder="请输入手机号" class="input">
				<view class="error">
					手机号码不正确
				</view>
				<view class="text distance">
				    账号密码
				</view>
				<input type="text" placeholder="请输入账号密码" class="input">
				<view class="btn">
					登录
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '', // 手机号码的数据变量
				password: '', // 账号密码的数据变量
				flag:false
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		.images {
			background: url('../../static/images/first-page.png');
			width: 750rpx;
			height: 490rpx;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;

			.shou {
				img {
					width: 158rpx;
					height: 158rpx;
				}

				.text {
					width: 204rpx;
					height: 40rpx;
					font-size: 40rpx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 35rpx;
					margin-top: 37rpx;
				}
			}
		}

		.main {
			// height: 1134rpx;
			margin-top: 139rpx;
			padding:0 48rpx;

			.text {
				width: 114rpx;
				height: 27rpx;
				font-size: 28rpx;
				font-family: Noto Sans S Chinese;
				font-weight: bold;
				color: #343434;
				line-height: 35rpx;
			}
			.error{
				color: red;
			}
		}
		.input{
			 width: 100%;
			 padding: 31rpx 0;
			 border-bottom: 1px solid rgba(0,0,0,0.1);
		}
		.distance{
			padding-top: 59rpx;
		}
		.btn{
			width: 440rpx;
			height: 90rpx;
			margin: 248rpx 115rpx 0 115rpx;
			background: linear-gradient(-90deg, #F7931E 0%, #FFCF29 100%);
			box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(255,167,42,0.6);
			border-radius: 45rpx;
			font-size: 40rpx;
			font-family: Noto Sans S Chinese;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
	}
</style>